<template>
  <div class="dashboard-container">
    <div>

       <!-- 卡片 -->
      <el-card shadow="never">
        <el-form ref="form" :model="query" label-width="80px">
          <el-form-item label="学科名称">
            <el-input
              v-model="query.subjectName"
              prop="query.subjectName"
            >
            </el-input>
            <el-button size="small"  @click="clearAway">清除</el-button>
            <el-button size="small" type="primary" @click="search">
             搜索
            </el-button>
            <el-button
              size="small"
              type="success"
              icon="el-icon-edit"
              @click="addSubjects()"
              >新增学科
            </el-button>
          </el-form-item>
        </el-form>

        <el-alert type="info" show-icon :closable="false">
          <template>
            <p class="countsSize">数据一共{{ counts }}条</p>
          </template>
        </el-alert>

        <!-- table -->
        <el-table style="width: 100%" :data="item">
          <el-table-column label="序号" type="index" width="60">
          </el-table-column>
          <el-table-column label="学科名称" prop="subjectName" width="180">
          </el-table-column>
          <el-table-column label="创建者" prop="username" width="180">
          </el-table-column>
          <el-table-column label="创建日期" width="180">
            <template slot-scope="scope">
               <!-- 使用时间格式化插件渲染时间 -->
              {{ scope.row.addDate | relativeTime }}
            </template>
          </el-table-column>
          <el-table-column label="前台是否显示">
            <!-- 使用插槽进行数据渲染 判断 后端传的值 是否是 1  如果是 1 是  不是 1 就是否 -->
            <template slot-scope="scope">
              {{ scope.row.isFrontDisplay === 1 ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column label="二级目录" prop="twoLevelDirectory">
          </el-table-column>
          <el-table-column label="标签" prop="tags">
          </el-table-column>
          <el-table-column label="题目数量" prop="totals"> </el-table-column>
          <el-table-column label="操作" width="260">
            <template slot-scope="scope">
              <el-link
                :underline="false"
                type="primary"
                @click="$router.push({
                    path: 'directorys',
                    query: { id: scope.row.id, name: scope.row.subjectName },
                  })"
                >学科分类</el-link>
              <el-link
                :underline="false"
                type="primary"
                @click="$router.push({
                    path: 'tags',
                    query: { id: scope.row.id, name: scope.row.subjectName },
                  })">
                  学科标签</el-link>
              <el-link
                :underline="false"
                type="primary"
                @click="amend(scope.row)"
                >修改</el-link>
              <el-link
                :underline="false"
                type="primary" @click="delSubjects(scope.row)">删除</el-link >
            </template>
          </el-table-column>
        </el-table>
<!-- 分页 -->
        <el-pagination
        background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="query.pagesize"
          layout=" prev,pager, next, sizes, jumper"
          :total="counts"
        >
        </el-pagination>

        <!-- 新增弹框 -->
        <el-dialog
          title="提示"
          :visible.sync="showDialog"
          width="22%"
          v-if="showDialog"
        >
          <el-form
            ref="form"
            :model="form"
            label-width="80px"
            size="small"
            :rules="rules"
          >
            <el-form-item label="学科名称" prop="subjectName">
              <el-input
                class="addInput"
                v-model="form.subjectName"
                placeholder="请输入学科名称"
              ></el-input>
            </el-form-item>

            <el-switch
              inactive-text="是否显示"
              v-model="form.isFrontDisplay"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>

            <el-form-item class="btnright">
              <el-button @click="showDialog = false" size="medium"
                >取 消</el-button
              >
              <el-button type="primary" @click="modifyAndAdd" size="medium"
                >确 定</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list, add, update, remove } from '@/api/hmmm/subjects' // 列表数据的API

export default {
  name: 'Subjects',

  data () {
    return {
      // 表单校验
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ]
      },

      item: [], // 列表数据
      counts: 0, // 总条数
      showDialog: false, // 新增弹框

      // input
      form: {
        subjectName: '',
        isFrontDisplay: true
      },

      // 分页
      query: {
        page: 1, // 当前页码
        pagesize: 10, // 每页的数据条数
        subjectName: ''
      },
      ModifyAndAdd: false // 添加还是修改
    }
  },
  created () {
    // 获取列表数据
    this.list()
  },
  methods: {

    //  删除
    delSubjects (row) {
      // 弹框提示
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          //   删除api
          const res = await remove(row)
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          if (this.item.length === 1) {
            this.query.page--
            if (this.query.page <= 1) {
              this.query.page = 1
            }
          }
          // 重新获取数据
          this.list()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 确定按钮
    modifyAndAdd () {
      // 兜底校验
      this.$refs.form.validate(async (valid) => {
        if (!valid) return false
        // 判断  ModifyAndAdd 状态  是 true 还是 false  修改 还是 新增
        if (this.ModifyAndAdd) {
          // 修改
          await update(this.form)
        } else {
          // 新增
          await add(this.form)
          this.query.page = 1
        }
        this.$message.success(
          this.ModifyAndAdd ? '修改学科成功' : '新增学科成功'
        )
        //   关闭弹框
        this.showDialog = false
        // 清空内容
        this.$refs.form.resetFields()
        this.form = {
          subjectName: '',
          isFrontDisplay: true
        }
        // 重新获取数据
        this.list()
      })
    },

    // 修改
    async amend (row) {
      //  打开弹框
      this.showDialog = true
      // 进行传值
      this.form.id = row.id
      this.form.subjectName = row.subjectName
      this.ModifyAndAdd = true
      if (row.isFrontDisplay === 1) {
        this.form.isFrontDisplay = true
      } else {
        this.form.isFrontDisplay = false
      }
    },

    // 新增
    async addSubjects () {
      this.showDialog = true
      this.ModifyAndAdd = false
      this.form = {
        subjectName: '',
        isFrontDisplay: true
      }
      this.query.subjectName = ''
    },

    // 清除 input 内容
    clearAway () {
      this.query.subjectName = ''
      this.query.page = 1
      this.list()
    },

    // 搜索
    async search () {
      this.list()
    },

    // 页面跳转改变时跳转
    handleCurrentChange (newpage) {
      this.query.page = newpage
      this.list()
    },

    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange (newNum) {
      this.query.pagesize = newNum
      this.query.page = 1
      this.list()
    },

    // 使用 list API 获取列表数据
    async list () {
      // 发送API
      const res = await list(this.query)
      // 获取到的数据添加到数据
      this.item = res.data.items
      // 获取总条数
      this.counts = res.data.counts
    }
    // 结束
  }
}
</script>

<style scoped>
.el-input {
  height: 36px;
  line-height: 36px;
  width: 200px;
}
button.el-button.el-button--default.el-button--small {
  margin-left: 10px;
}
button.el-button.el-button--success.el-button--small {
  float: right;
}
.el-alert {
  margin-bottom: 20px;
}
.countsSize {
  font-size: 14px;
}

.el-alert.el-alert--info.is-light {
  height: 30px;
}
.el-link {
  margin-right: 10px;
}

.el-pagination {
  float: right;
  padding: 20px 0;
}
 ::v-deep.el-table--medium td,
.el-table--medium th {
  padding: 15px 0;
}
.el-switch {
  padding: 20px 0;
}
.btnright {
  padding-top: 20px;
  text-align: right;
}
::v-deep span.el-pagination__jump {
    margin-left: 5px;
}
::v-deep .el-alert__icon.is-big {
    font-size: 16px;
    width: 28px;
}
</style>
